/**
 * 基础菜单 商品管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">广告</el-breadcrumb-item>
      <el-breadcrumb-item>添加广告</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- form -->
      <el-form
        :inline="true"
        :model="searchGoods"
        class="demo-form-inline"
        size="small">
        <el-form-item label="商品名称">
          <el-input v-model="searchGoods.name" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <!-- 这里对category表进行数据回显，显示问二级分类 -->
           <el-cascader
            v-model="category3Ids"
            :options="options" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="商品品牌">
          <el-select v-model="searchGoods.brandId" placeholder="商品品牌">
             <el-option
                  v-for="item in brandData" :key="item.id" :label="item.name" :value="item.id"
                  ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goodsPageList()" plain icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>

      
<!--新增对话框-->
<el-dialog :title="'新增广告'" :visible.sync="dialogFormVisible">
  <el-form :model="adForm">

    <el-form-item label="商品id" :label-width="formLabelWidth">
      <el-input v-model="adForm.spuid" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="广告名称" :label-width="formLabelWidth">
      <el-input v-model="adForm.name" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="广告位置" :label-width="formLabelWidth">
        <el-select v-model="adForm.position" placeholder="请选择">
    <el-option
      v-for="item in optionsggwz"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    </el-form-item>

    <!-- <el-form-item label="广告图片" :label-width="formLabelWidth"> -->
      <!--上传文件组件-->
          <!-- <SingleUpload v-model="adForm.image"></SingleUpload> -->
        <!-- action="http://myqingchengdemo.oss-cn-shanghai.aliyuncs.com" -->
      <!-- <el-upload
        action="http://localhost:9500/business/upload/oss?folder=Business_images"
        class="avatar-uploader"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item> -->
    
            <!-- <el-form-item label="广告图片">
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:88/api/business/upload/oss?folder=Business_images"
                  list-type="picture-card"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  > -->
                  <!-- <i class="el-icon-plus"></i> -->
                <!--<span v-if="showBrand.image">当前image:&nbsp;</span> -->
                 <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
                <!-- </el-upload> -->
                <!-- <el-dialog :visible.sync="ossdialogVisible">
                  <img width="30%" :src="showBrand.image" alt="">
                </el-dialog> -->
            <!-- </el-form-item> -->

    <el-form-item label="广告状态" :label-width="formLabelWidth">
          <el-switch
            v-model="adForm.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0">
          </el-switch>
    </el-form-item>

   <el-form-item label="广告开始时间" :label-width="formLabelWidth">
          <div class="block">
    <el-date-picker
      v-model="adForm.startTime"
      type="datetime"
      placeholder="选择开始日期时间">
    </el-date-picker>
  </div>
      </el-form-item>

   <el-form-item label="广告结束时间" :label-width="formLabelWidth">
  <div class="block">
    <el-date-picker
      v-model="adForm.endTime"
      type="datetime"
      placeholder="选择到期日期时间">
    </el-date-picker>
  </div>
        </el-form-item>


   <el-form-item label="广告备注内容" :label-width="formLabelWidth">
        <el-input
  type="textarea"
  :rows="2"
  placeholder="请输入备注内容"
  v-model="adForm.remarks">
</el-input>
        </el-form-item>

  </el-form>

  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false;adForm={}">取 消</el-button>
    <el-button type="primary" @click="save();adForm={}">确 定</el-button>
  </div>
</el-dialog>

      <!-- table -->
      <el-table :data="goodsTabData" style="width: 100%" >
        <el-table-column label="编号" prop="id"> </el-table-column>
        <el-table-column label="商品图片">
          <template slot-scope="scope">
            <el-image
            style="width: 100px; height: 50px"
            :src="scope.row.image"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name"> </el-table-column>
        <el-table-column label="货号" prop="sn">
          <template slot-scope="scope">
            货号：{{scope.row.sn}}
          </template>
        </el-table-column>
        <el-table-column label="销量" prop="saleNum"> </el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            {{scope.row.status == '0' ? "未审核" : "已审核"}}<br/>
            <el-link type="primary" @click="queryAuditInfo(scope.row)">审核详情</el-link>
          </template>
        </el-table-column>
        <el-table-column align="right" width="200">
          <template slot="header">
          </template>
      <template slot-scope="scope">
  <el-button type="primary" icon="el-icon-s-ticket" @click="xainshibiaodan(scope.$index, scope.row);">添加广告</el-button>
          </template>
        </el-table-column>
      </el-table>
       <!-- 分页插件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[8, 16, 32, 64]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <el-dialog
        title="审核详情"
        :visible.sync="auditDialogVisible"
        width="30%"
        :before-close="auditHandleClose">
        {{AuditInfo.id}}<br/>
        <!-- 这是一个待完善的功能，数据库关联数据/数据库未提供tab -->
           <!-- <el-table
            :data="AuditInfo"
            border
            style="width: 100%">
            <el-table-column
              prop="auditDate"
              label="审核时间"
              width="180">
            </el-table-column>
            <el-table-column
              prop="auditUser"
              label="审核人员"
              width="180">
            </el-table-column>
            <el-table-column
              prop="status"
              label="审核结果">
            </el-table-column>
            <el-table-column
              prop="message"
              label="反馈信息">
            </el-table-column>
          </el-table> -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="auditDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="auditDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>

export default {
  data () {
    return {
      searchGoods: {}, // 查询的条件参数
      goodsTabData: [], // 表格数据
      pageNum: 0,
      pageSize: 8,
      total: 0,
      dialogVisible: false,
      title: 'add',
        // 绑定表单对象
        adForm: {},
        // 表单label的宽度
          formLabelWidth: '120px',
        // 控制对话框是否显示的标志
        dialogFormVisible: false,
      showData: {}, // 回显数据
      brandData: [], // 商品品牌
      options: [], // 商品分类
      category3Ids: [],
      AuditInfo: {}, // 审核详情信息
      auditDialogVisible: false,
        //广告位
        optionsggwz: [{
          value: 'web_index_lb',
          label: '首页广告位'
        }, {
          value: 'index_ea_lb',
          label: '家用电器广告位'
        }, {
          value: 'index_mobile_lb ',
          label: '手机通讯广告位'
        }],
        // 映射上传文件组件对应的文件路径
        imageUrl: ''
    }
  },
  created () {
    this.menthodBrandData()
    this.goodsPageList()
  },
  methods: {
    //显示表单
    xainshibiaodan (index,row){
      this.dialogFormVisible=true
      this.adForm.image=row.image
      this.adForm.spuid=row.id
    },
    
    lookOver () {
      alert('多此一举的功能，不需要实现')
    },
    auditHandleClose () {
      this.auditDialogVisible = false
    },
    // 审核信息 TODO 需创建审核信息表将spu和user关联数据
    async queryAuditInfo (row) {
      const { data: res } = await this.$http.get(`/goods/spu/findById/${row.id}`)
      this.AuditInfo = res.data.spu
      this.auditDialogVisible = true
    },
    goodsLog () {
      alert('数据库未提供相关的table')
    },
    // 回显商品分类的联动信息
    async menthodOptions () {
      const { data: res } = await this.$http.get('/goods/category/list')
      // console.log(res)
      this.options = res.data.list
    },
    // 回显商品品牌
    async menthodBrandData () {
      const { data: res } = await this.$http.get('/goods/brand/list')
      this.brandData = res.data.list
      this.menthodOptions()
    },
    // 分页查询
    async goodsPageList () {
      if (this.category3Ids.length > 0) { this.searchGoods.category3Id = this.category3Ids[this.category3Ids.length - 1] }
      const { data: res } = await this.$http.post(`/goods/spu/adQueryList/${this.pageNum}/${this.pageSize}`, this.searchGoods)
      // console.log(res)
      this.goodsTabData = res.data.pageUtils.rows
      this.total = res.data.pageUtils.total
    },
    // 编辑回显 TODO
    handleEdit (row) {

    },
    // 删除
    async handleDelete (row) {
      const { data: res } = await this.$http.delete(`/goods/spu/deleteByIdSpu/${row.id}`)
      if ( res.code == 200) this.$message.success('删除成功')
    },
    // 上一页、下一页
    handleSizeChange (newSize) {
      this.pageSize = newSize
      this.goodsPageList()
    },
    handleCurrentChange (newNum) {
      this.pageNum = newNum
      this.goodsPageList()
    },
      // 以下是与文件上传相关的方法
      handleAvatarSuccess (res, file) {
        // 将后台写回的图片路径赋值给imageUrl
        this.imageUrl = file.response
      },
      // 新增或编辑对话框的确认按钮，即保存
      async save () {
        this.dialogFormVisible = false
        // 发请求
        const { data: res } = await this.$http.post(`/business/ad/add?spuid=${this.adForm.spuid}`, this.adForm)
        if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '添加广告成功!'
            })
            this.goodsPageList()
        }
      },
      //判断图片
      beforeAvatarUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        // 图片大小不能大于2m
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      }
  }
}

</script>

<style scoped>
</style>

 
 